<template>
    <div>
        <el-dialog :model-value="dialogVisible" :before-close="handleClose" title="重置密码" width="500">
            <el-form :model="form" ref="ruleFormRef" :rules="rules">

                <div v-if="props.changeId != 0">

                    <el-form-item label="用户" :label-width="formLabelWidth">
                        <div>
                            <span>{{ name }}</span>
                        </div>
                    </el-form-item>
                    <!-- 输入新密码 -->
                    <el-form-item label="输入新密码" :label-width="formLabelWidth" prop="pwd">
                        <el-input v-model="form.pwd" autocomplete="off" />
                    </el-form-item>

                    <!-- 再次输入新密码 -->
                    <el-form-item label="再次输入新密码" :label-width="formLabelWidth" prop="newPwd">
                        <el-input v-model="form.newPwd" autocomplete="off" />
                    </el-form-item>
                </div>


            </el-form>
            <template #footer>
                <div class="dialog-footer">
                    <el-button @click="changeParent(false)">取消修改</el-button>
                    <el-button type="primary" @click="submitForm(ruleFormRef)">确认修改</el-button>
                </div>
            </template>
        </el-dialog>
    </div>
</template>

<script setup lang='ts'>
import { addCompany, getCompany } from '@/apis/branch/branch';
import type { Company } from '@/apis/branch/type';
import { resetPwd } from '@/apis/resetPwd/resetPwd';
import type { reset } from '@/apis/resetPwd/type';
import { doEncrypt } from '@/utils/cryptoUtil';
import { ElMessage, type FormInstance, type FormRules } from 'element-plus';
import { ref, reactive, onUpdated } from 'vue';
const props = defineProps({
    dialogVisible: {
        type: Boolean,
        default: false
    },
    changeParent: {
        type: Function,
        default: () => { }
    },
    changeId: {
        type: Number,
        default: 0
    }
})
const emit = defineEmits(['closeDialogResetPwd'])
const close = () => {
    emit('closeDialogResetPwd', false)
}

// 输入框宽度
const formLabelWidth = '140px'
let name = ref<string>('')
// 获取单条机构信息
const getCompanyById = async (id: number) => {
    let res = await getCompany(id)
    console.log('单条机构信息', res);
    name.value = res.name

}


onUpdated(() => {
    if (props.changeId == 0) {
        form.value = {
            pwd: '',
            newPwd: '',
            id: 0
        }
    }

    if (props.changeId != 0) {
        form.value.id = props.changeId
        getCompanyById(props.changeId)

    }
})


// 点击遮罩层关闭弹窗的函数
const handleClose = (done: () => void) => {
    props.changeParent(false)
    close();

    form.value = {
        pwd: '',
        newPwd: '',
        id: 0
    }

}

// 表单
const formRef = ref<FormInstance | null>(null);
const ruleFormRef = ref<FormInstance>()
const form = ref<reset>({
    pwd: '',
    newPwd: '',
    id: 0
})



// 表单提示

const rules = reactive<FormRules<reset>>({
    pwd: [
        { required: true, message: '请输入密码', trigger: 'blur' },
    ],
    newPwd: [
        { required: true, message: '请再次输入密码', trigger: 'blur' },
    ],

})


// 提交表单
const submitForm = async (formEl: FormInstance | undefined) => {
    if (!formEl) {
        ElMessage.error('表单未正确初始化，请刷新页面重试');
        return
    }

    console.log(form.value);
    await formEl.validate(async (valid: boolean) => {
        if (valid) {
            if(form.value.newPwd!=form.value.pwd){
                ElMessage.error('两次密码不一致');
                return
            } 
            // 加密密码
            form.value.pwd = await doEncrypt(form.value.pwd);
            form.value.newPwd = await doEncrypt(form.value.newPwd);
            let res = await resetPwd(form.value)
            ElMessage.success('密码重置成功');
            // 关闭弹窗
            props.changeParent(false);
            // 清空表单数据
            form.value = {
                pwd: '',
                newPwd: '',
                id: 0
            };
            close();
        } else {
            console.log('error submit!!');
            form.value = {
                pwd: '',
                newPwd: '',
                id: 0
            };
            // 不需要返回 false，直接结束函数即可
        }
    });
};



</script>

<style scoped lang='less'></style>